<template>
  <svg class="icon" :class="iconClasses" :style="iconStyle" @click="handleClick">
    <use :href="`${sprite}#${icon}`"></use>
  </svg>
</template>

<script>
import sprite from "~/assets/icons/sprite.svg";

export default {
  name: "TheIcon",
  props: {
    // 图标名称
    icon: {
      type: String,
      required: true
    },
    // 图标尺寸
    size: {
      type: [String, Number],
      default: 'medium',
      validator(value) {
        // 支持预设尺寸或自定义数值
        return ['small', 'medium', 'large', 'xl'].includes(value) || !isNaN(Number(value));
      }
    },
    // 颜色变体
    variant: {
      type: String,
      default: 'default',
      validator(value) {
        return ['default', 'primary', 'secondary', 'success', 'warning', 'danger', 'muted'].includes(value);
      }
    },
    // 自定义颜色
    color: {
      type: String,
      default: null
    },
    // 自定义填充颜色
    fill: {
      type: String,
      default: null
    },
    // 自定义描边颜色
    stroke: {
      type: String,
      default: null
    },
    // 描边宽度
    strokeWidth: {
      type: [String, Number],
      default: 2
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否可点击
    clickable: {
      type: Boolean,
      default: false
    },
    // 自定义悬停颜色
    hoverColor: {
      type: String,
      default: null
    },
    // 是否启用自动主题悬停效果
    autoThemeHover: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      sprite
    };
  },
  computed: {
    iconClasses() {
      return {
        [`icon-${this.icon}`]: true,
        [`icon-size-${this.sizeClass}`]: true,
        [`icon-variant-${this.variant}`]: true,
        'icon-disabled': this.disabled,
        'icon-clickable': this.clickable && !this.disabled,
        'icon-favorite-filled': this.icon === 'favorite-filled'
      };
    },
    sizeClass() {
      // 如果是数字，返回custom，否则返回预设尺寸
      return !isNaN(Number(this.size)) ? 'custom' : this.size;
    },
    iconStyle() {
      const styles = {};

      // 自定义尺寸
      if (!isNaN(Number(this.size))) {
        const sizeValue = `${this.size}px`;
        styles.width = sizeValue;
        styles.height = sizeValue;
        styles.minWidth = sizeValue;
        styles.minHeight = sizeValue;
      }

      // 自定义颜色处理
      if (this.color) {
        styles.color = this.color;
        // 使用CSS变量存储颜色，而不是直接设置fill和stroke
        styles['--icon-color'] = this.color;
      }

      // 直接应用fill和stroke属性（如果提供）
      if (this.fill) {
        styles['--icon-fill'] = this.fill;
      }
      if (this.stroke) {
        styles['--icon-stroke'] = this.stroke;
      }

      // 处理悬停颜色
      if (!this.autoThemeHover) {
        // 如果禁用自动主题悬停，使用自定义悬停颜色或当前颜色
        styles['--hover-color'] = this.hoverColor || 'currentColor';
      } else if (this.hoverColor) {
        // 如果启用自动主题悬停但也提供了自定义悬停颜色，优先使用自定义悬停颜色
        styles['--hover-color'] = this.hoverColor;
      }

      // 描边宽度 - 图标粗细微调
      if (this.icon === 'moon' || this.icon === 'sun') {
        styles.strokeWidth = 0;
      } else {
        styles.strokeWidth = this.strokeWidth;
      }
      if (this.icon === 'search') {
        styles.strokeWidth = 1.5;
      }
      if (this.icon === 'favorite') {
        styles.strokeWidth = 1.5;
      }
      if (this.icon === 'favorite-filled') {
        styles.strokeWidth = 0;
      }
      if (this.icon === 'shopping-cart') {
        styles.strokeWidth = 1;
      }
      if (this.icon === 'moon') {
        styles.stroke = '$pure-white';
        styles.fill = '$pure-white';
      }
      if (this.icon === 'sun') {
        styles.stroke = '$obsidian';
        styles.fill = '$obsidian';
      }

      return styles;
    }
  },
  methods: {
    handleClick(event) {
      if (this.clickable && !this.disabled) {
        this.$emit('click', event);
      }
    }
  },
};

</script>

<style scoped lang="scss">
/* 基础图标样式 */
.icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
  color: inherit;
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}

.icon:hover {
  fill: $dark-gold;
  stroke: $dark-gold;
  scale: 1.03;
}

/* 尺寸变体 */
.icon-size-small {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

.icon-size-medium {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.icon-size-large {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.icon-size-xl {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}


/* 特定图标样式 */
.icon-favorite-filled {
  fill: $dark-gold;
  stroke: $dark-gold;
  color: $dark-gold;
}

.icon use[href*="#favorite-filled"] {
  fill: $dark-gold;
  stroke: $dark-gold;
  color: $dark-gold;
}

/* 交互状态 */
.icon-clickable {
  cursor: pointer;
}

/* 禁用状态 */
.icon-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
</style>
